<template>
  <Nav :showBlack="false">
    <img src="../assets/title.png" class="logo" alt=""  >
  </Nav>
  <div class="page">
    <div class="left">
      <div class="lists">
        <div class="item" @click="checkTab(index)" v-for="(item,index) in list_left" :class="{active:index == current}">{{item.name}}</div>
      </div>
    </div>
    <div class="right">
      <div class="courses">
        <div class="item" @click="goVideoDetail(item)"  v-for="(item,index) in right_data" :key="item.id">
          <div class="imgbox" :style="{ backgroundImage: `url(${item.cover_image})`}">
            <img src="../assets/play.png" alt="" v-show="item.file_ext == 'mp4'">
          </div>
          <div class="infoBox">
            <div class="name">{{item.name}}</div>
            <div class="infoText">
              {{removeTags(item.descript)}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer/>
</template>
<script setup>
import Footer from '../components/tab.vue'
import Nav from "../components/nav.vue"
import { onMounted, reactive, ref } from "vue";
import { api } from "@/utils/api.js";
import { useRouter } from 'vue-router'
import { removeTags } from '@/utils/utils'
import { mainStore } from "@/store/index.js";

const process = ref(0);
const mainStoreObj = mainStore();
const router = useRouter();
const list_left = reactive([
  {
    id:0,
    name:'全部课程'
  }
]);
let right_data = ref([]);
let current = ref(0);


async function getList() {
  const res = await api('/api/course/course_list','post',{})
  list_left.push(...res)
}

async function renderList() {
  const res = await api('/api/course/resource_list','post',{id:list_left[current.value].id})
  //console.log(res)

  // if(right_data.length > 0) {
  //
  // }
  // console.log(res)
  right_data.value.push(...res)
}

onMounted(() => {
  getList();
  renderList();
})

const checkTab = (index) => {
  current.value = index;
  right_data.value.length = 0;
  renderList();
}

const goVideoDetail = (src) => {
  //console.log(src.id)
  // mainStoreObj.changeSrc(src);
  router.push({path:'videoDetail',query:{id:src.id}})
}

</script>
<style scoped lang="scss">
@import '@/assets/style/mixin';
.page {
  background: #0f1830;
  padding-top: 170px;
  padding-bottom: 200px;
  color:#fff;
  display: flex;
  overflow: hidden !important;
  .left {
    width: 390px;
    flex:none;
    .lists {
      padding: 0 47px;
      .item {
        font-size: 40px;
        width: 307px;
        height: 89px;
        margin: 20px 0;
        text-align: center;
        line-height: 89px;
        @include ellipsis;
        &.active {
          background: #f5ead0;
          border-radius: 46px;
          color:#222222;
          font-weight: bold;
        }
      }
    }
  }
  .right {
    flex:1;
    padding-right: 39px;
    height: 100%;
    overflow-y: auto;
    .item {
      border:1px #4a4d52 solid;
      border-radius: 36px;
      padding:32px;
      margin-bottom: 28px;
      .imgbox {
        width: 100%;
        height: 324px;
        //background: pink;
        border-radius: 10px;
        background-size: cover;
        background-position: center;
        img {
          width: 100px;
          height: 100px;
        }

        margin-bottom: 28px;
        @include  center();
      }
      .infoBox {
        .name {
          font-size: 38px;
          margin-bottom: 20px;
        }
        .infoText {
          font-size: 28px;
          line-height: 1.6;
        }
      }
    }
  }
}
.logo {
  height: 50px;
  width: auto;
}

</style>
